<template><div><h2 id="json表单" tabindex="-1"><a class="header-anchor" href="#json表单"><span>JSON表单</span></a></h2>
<p>Dcat Admin 中文文档 /</p>
<h2 id="json格式字段处理" tabindex="-1"><a class="header-anchor" href="#json格式字段处理"><span>JSON格式字段处理</span></a></h2>
<p><code v-pre>dcat-admin</code>的表单提供了下面几个组件来处理<code v-pre>JSON</code>格式的字段，方便用来处理<code v-pre>JSON</code>格式的对象、一维数组、二维数组等对象。</p>
<h2 id="键值对象-keyvalue" tabindex="-1"><a class="header-anchor" href="#键值对象-keyvalue"><span>键值对象 (keyValue)</span></a></h2>
<p><img src="@source/dcat-admin-2x/assets/images/08a60d58-ad32-4f41-807e-55cedcb37bb7-jwHjbKP9PL.png" alt=""></p>
<p>如果你的字段存储的是不固定<code v-pre>键</code>的<code v-pre>{&quot;field&quot;:&quot;value&quot;}</code>格式，可以用<code v-pre>keyValue</code>组件:</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">keyValue</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'column_name'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 设置校验规则</span></span>
<span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">keyValue</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'column_name'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">rules</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'required|min:5'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>自定义键名以及键值标题翻译</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">keyValue</span><span class="token punctuation">(</span><span class="token operator">...</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">setKeyLabel</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'键名'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">setValueLabel</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'键值'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p>也可以自定义默认结构，以便于新建数据时候自动带入 keyValue 数据的模板</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">keyValue</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'price'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">default</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string single-quoted-string">'cny'</span> <span class="token operator">=></span> <span class="token string single-quoted-string">''</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'usd'</span> <span class="token operator">=></span> <span class="token string single-quoted-string">''</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">setKeyLabel</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'币种'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">setValueLabel</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'价格'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p><img src="@source/dcat-admin-2x/assets/images/c3f6d69e-01e2-4c4d-9a85-094c9166d44d-AKy1LPElHF.png" alt=""></p>
<h2 id="固定键值对象-embeds" tabindex="-1"><a class="header-anchor" href="#固定键值对象-embeds"><span>固定键值对象 (embeds)</span></a></h2>
<p><img src="@source/dcat-admin-2x/assets/images/40b460a8-a38f-41f9-9654-ccf4d7ad5227-KwSIti7bs5.png" alt=""></p>
<p>用于处理<code v-pre>mysql</code>的<code v-pre>JSON</code>类型字段数据或者<code v-pre>mongodb</code>的<code v-pre>object</code>类型数据，也可以将多个<code v-pre>field</code>的数据值以<code v-pre>JSON</code>字符串的形式存储在<code v-pre>mysql</code>的字符串类型字段中</p>
<p>适用于有固定键值的<code v-pre>JSON</code>类型字段</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">embeds</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'column_name'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token variable">$form</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line"></span>
<span class="line">    <span class="token variable">$form</span><span class="token operator">-></span><span class="token function">text</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'key1'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">required</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token variable">$form</span><span class="token operator">-></span><span class="token function">email</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'key2'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">required</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token variable">$form</span><span class="token operator">-></span><span class="token function">datetime</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'key3'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">    <span class="token variable">$form</span><span class="token operator">-></span><span class="token function">dateRange</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'key4'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'key5'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'范围'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">rules</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'required'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">saving</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token variable">$v</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">    <span class="token comment">// 转化为json格式存储</span></span>
<span class="line">    <span class="token keyword">return</span> <span class="token function">json_encode</span><span class="token punctuation">(</span><span class="token variable">$v</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 自定义标题</span></span>
<span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">embeds</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'column_name'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'字段标题'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token variable">$form</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">    <span class="token operator">...</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>回调函数里面构建表单元素的方法调用和外面是一样的。</p>
<h2 id="一维数组-list" tabindex="-1"><a class="header-anchor" href="#一维数组-list"><span>一维数组 (list)</span></a></h2>
<p><img src="@source/dcat-admin-2x/assets/images/badd32c1-b6ad-4482-89ed-4de4431f9ca5-aO6OS0sOyv.png" alt=""></p>
<p>如果你的字段是用来存储<code v-pre>[&quot;foo&quot;, &quot;Bar&quot;]</code>格式的一维数组, 可以使用<code v-pre>list</code>组件:</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">list</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'column_name'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 设置校验规则</span></span>
<span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">list</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'column_name'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">rules</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'required|min:5'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 设置最大和最小元素个数</span></span>
<span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">list</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'column_name'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">max</span><span class="token punctuation">(</span><span class="token number">10</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">min</span><span class="token punctuation">(</span><span class="token number">5</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="二维数组-table" tabindex="-1"><a class="header-anchor" href="#二维数组-table"><span>二维数组 (table)</span></a></h2>
<p><img src="@source/dcat-admin-2x/assets/images/ee138716-e875-4c28-8b8c-ba5e4400da8f-755BUms334.png" alt=""></p>
<p>如果某一个字段存储的是<code v-pre>json</code>格式的二维数组，可以使用<code v-pre>table</code>表单组件来实现快速的编辑：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">table</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'column_name'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token variable">$table</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">    <span class="token variable">$table</span><span class="token operator">-></span><span class="token function">text</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'key'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token variable">$table</span><span class="token operator">-></span><span class="token function">text</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'value'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token variable">$table</span><span class="token operator">-></span><span class="token function">text</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'desc'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">saving</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token variable">$v</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">    <span class="token keyword">return</span> <span class="token function">json_encode</span><span class="token punctuation">(</span><span class="token variable">$v</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>这个组件类似于<code v-pre>hasMany</code>组件，不过是用来处理单个字段的情况，适用于简单的二维数据。</p>
<h2 id="二维数组-array" tabindex="-1"><a class="header-anchor" href="#二维数组-array"><span>二维数组 (array)</span></a></h2>
<p><img src="@source/dcat-admin-2x/assets/images/0fdeb896-9ff1-428b-a1d6-9782a177fbf5-MejvctX1V7.png" alt=""></p>
<p>如果某一个字段存储的是<code v-pre>json</code>格式的二维数组，并且字段比较多，可以使用<code v-pre>array</code>表单组件来实现快速的编辑：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">array</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'column_name'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token variable">$table</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">    <span class="token variable">$table</span><span class="token operator">-></span><span class="token function">text</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'key'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token variable">$table</span><span class="token operator">-></span><span class="token function">text</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'value'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token variable">$table</span><span class="token operator">-></span><span class="token function">textarea</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'desc'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">saveAsJson</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></div></template>


